<!-- 车机管理 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @change="searchChange" />
    <table-index :table="table" @loadData="loadData" />
  </div>
</template>

<script setup name="CarBoxUseList">
  import { Message } from '@arco-design/web-vue'
  import { getCarTboxVehicleList, getCommandTbox } from '@/api/asset/carTbox'
  import { onMounted, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'

  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()
  import { usePageDict } from '@/hooks/useDict'
  const carTboxVehicleDict = usePageDict('carTboxVehicleDict')

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      { label: '车架号', prop: 'vinLike', type: 'a-input' },
      {
        label: '设备供应商',
        prop: 'vehicleFirm',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleFirmEnums,
      },
      { label: '设备sn/id', prop: 'vehicleSnLike', type: 'a-input' },
      { label: '设备code', prop: 'vehicleCodeLike', type: 'a-input' },
      {
        label: '设备状态',
        prop: 'vehicleStatus',
        type: 'a-select',
        options: carTboxVehicleDict.vehicleStatusEnums,
      },
    ]
  })
  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // table 配置
  const table = useTable({
    columns: [
      { title: '设备sn/id', dataIndex: 'vehicleSn', width: 160, fixed: 'left' },
      { title: '设备code', dataIndex: 'vehicleCode', width: 160 },
      { title: '设备供应商', dataIndex: 'vehicleFirm', width: 100 },
      { title: '车牌号', dataIndex: 'licenseNo', width: 110 },
      { title: '车牌颜色', dataIndex: 'licenseNoColorName', width: 100 },
      { title: '车架号', dataIndex: 'vin' },
      { title: '车型', dataIndex: 'modelName' },
      { title: '设备状态', dataIndex: 'vehicleStatusName', width: 100 },
    ],
    operates: [
      // 只有当设备状态是在线、不在线时，允许点击这些按钮；设备状态是未知的时候，设备仅能查看操作记录
      {
        label: '开门',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.open',
        method: (record) => {
          commandTboxFn(record.id, 1)
        },
      },
      {
        label: '锁门',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.close',
        method: (record) => {
          commandTboxFn(record.id, 2)
        },
      },
      {
        label: '供电',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.power',
        method: (record) => {
          commandTboxFn(record.id, 3)
        },
      },
      {
        label: '断电',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.outage',
        method: (record) => {
          commandTboxFn(record.id, 4)
        },
      },
      {
        label: '鸣笛寻车',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.seek',
        method: (record) => {
          commandTboxFn(record.id, 7)
        },
      },
      {
        label: '开门并供电',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.open-and-power',
        method: (record) => {
          commandTboxFn(record.id, 5)
        },
      },
      {
        label: '锁门并断电',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.close-and-outage',
        method: (record) => {
          commandTboxFn(record.id, 6)
        },
      },
      {
        label: '位置',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.location',
        method: (record) => {
          navigateTo(`/car-box-use/location/${record.id}`)
        },
      },
      {
        label: '轨迹',
        show: (record) => record.vehicleStatus == 2 || record.vehicleStatus == 1,
        permission: 'svms:asstes:device:car-box-use.track',
        method: (record) => {
          navigateTo(`/car-box-use/track/${record.id}`)
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:device:car-box-use.operaterecords',
        method: (record) => {
          navigateTo(`/car-box-use/detail/${record.id}`, `${record.vehicleSn}-操作记录`)
        },
      },
    ],
    buttons: [],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarTboxVehicleList)

  // 控制tbox
  const commandTboxFn = (id, type) => {
    getCommandTbox({ id, command: type }).then((res) => {
      if (res.code === 200) {
        Message.success(res.message)
        loadData()
      }
    })
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped></style>
